<template>
  <div>
    <el-button size="small" @click="handleGetCheckedNodes">查询选中的节点</el-button>
  </div>
  <div style="padding: 20px">
    <el-input
        v-model="filterText"
        style="width: 240px"
        placeholder="Filter keyword"
    />
    <el-tree
        node-key="id"
        show-checkbox
        :default-expand-all="true"
        ref="treeRef"
        style="max-width: 600px"
        :data="regions"
        :props="defaultProps"
        :filter-node-method="filterNode"
    />
  </div>
</template>

<script setup name="Region">
import { listRegionTree } from "@/api/user/region";
//3、获取树形控件被选中的节点node-key的值
const handleGetCheckedNodes = ()=>{
  console.log(treeRef.value.getCheckedKeys(),treeRef.value.getHalfCheckedKeys())
}
//2、页面树形数据过滤
//接收树形控件的变量
const treeRef = ref()
//收集过滤文本的树形
const filterText = ref('')
// vue的监听函数： 当filterText的值被改变时 会触发调用
watch(filterText, (val) => {
  //需求：当filteText值改变时 对树形控件中的数据进行过滤
  treeRef.value.filter(val) //调用树形控件的filter时，会触发树形控件:filter-node-method绑定的方法进行过滤
})
//树形控件过滤方法
const filterNode = (value, data) => {
  if (!value) return true //如果监听到输入的文本不存在 返回true表示节点保留
  //data.name.includes(value)： 如果name属性值不包含value返回false，表示不保留
  return data.name.toUpperCase().includes(value.toUpperCase()) //如果监听输入的文本不为空，使用每个节点的 数据对象的name属性值和文本比较过滤
}

//1、页面渲染时初始化页面的树形数据
onMounted(()=>{
  initPageData()
})
const initPageData = async ()=>{
  const {data} = await listRegionTree()
  regions.value = data
}

//展示省市区 树形数据，数据较少，可以在后端查询所有组装好之后交给前端
//树形控件需要的数据:
const regions = ref([])
//树形控件的配置
const defaultProps = {
  children: 'children', //配置解析数据时，他下级数据的属性名
  label: 'name', // 解析数据时，展示的标题属性
}
</script>
